<template>
  <el-dialog width="500px" title="商户价格配置" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
      <el-form-item prop="shopId" label="商户">
        <el-select :disabled="isEdit" v-model="dialogForm.shopId" filterable placeholder="请选择商户" style="width: 100%" clearable>
          <el-option v-for="item in shopOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
        </el-select>
      </el-form-item>
      <el-form-item prop="goodsId" label="商品">
        <el-select :disabled="isEdit" v-model="dialogForm.goodsId" filterable placeholder="请选择商品" style="width: 100%" clearable
          @change="goodsChange">
          <el-option v-for="item in goodsOptions" :key="item.goodsId" :label="item.goodsName" :value="item.goodsId" />
        </el-select>
      </el-form-item>
      <div class="price-box" v-show="goodsForm.costPrice || goodsForm.discountPrice">
        <div v-show="goodsForm.costPrice">
          <span>默认成本价(元)：</span>
          <span>{{ accDiv((goodsForm.costPrice || 0),10000) }}</span>
        </div>
        <div v-show="goodsForm.discountPrice">
          <span>默认折扣价(元)：</span>
          <span>{{ accDiv((goodsForm.discountPrice || 0),10000) }}</span>
        </div>
      </div>
      <el-form-item prop="isCostPrice" label="成本价">
        <el-radio-group v-model="dialogForm.isCostPrice">
          <el-radio-button :label="0">
            不配置
          </el-radio-button>
          <el-radio-button :label="1">
            配置
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="costPrice" v-if="dialogForm.isCostPrice == 1">
        <el-input v-model="dialogForm.costPrice" type="number" style="width: 100%" placeholder="请输入成本价" />
      </el-form-item>

      <el-form-item prop="isDiscountPrice" label="折扣价">
        <el-radio-group v-model="dialogForm.isDiscountPrice">
          <el-radio-button :label="0">
            不配置
          </el-radio-button>
          <el-radio-button :label="1">
            配置
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="discountPrice" v-if="dialogForm.isDiscountPrice == 1">
        <el-input v-model="dialogForm.discountPrice" type="number" style="width: 100%" placeholder="请输入折扣价" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitHandle">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import api from '../api'
import { warningDeal, accDiv, successDeal } from '@/utils/utils'
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      isEdit: false,
      dialogFormVisible: false,
      loading: false,

      dialogForm: {
        isCostPrice: 0,
        isDiscountPrice: 0,
      },
      dialogFormRules: {
        shopId: [
          { required: true, message: '请选择商户', trigger: 'blur' },
        ],
        goodsId: [
          { required: true, message: '请选择商品', trigger: 'blur' },
        ],
        isCostPrice: [
          { required: true, message: '请选择是否配置成本价', trigger: 'blur' },
        ],
        isDiscountPrice: [
          { required: true, message: '请选择是否配置折扣价', trigger: 'blur' },
        ],
        costPrice: [
          { required: true, message: '请输入成本价', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
        discountPrice: [
          { required: true, message: '请输入折扣价', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
      },

      goodsOptions: [],
      shopOptions: [],
      goodsForm: {},
    })

    function dialogShow(data = null) {
      if (data) {
        state.isEdit = true
        state.dialogForm = JSON.parse(JSON.stringify(data))
        state.dialogForm.isCostPrice = ((!state.dialogForm?.costPrice || (state.dialogForm?.costPrice == -1)) ? 0 : 1)
        state.dialogForm.isDiscountPrice = ((!state.dialogForm?.discountPrice || (state.dialogForm?.discountPrice == -1)) ? 0 : 1)
        getDetail(state.dialogForm?.goodsId)
      }
      getShopList()
      getGoodsAll()
      state.dialogFormVisible = true
    }

    function getGoodsAll() {
      api.goodsInfoAll().then(res => {
        if (res.code == '200') {
          state.goodsOptions = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getShopList() {
      const obj = {}
      api.shopListAll(obj).then(res => {
        if (res.code == '200') {
          state.shopOptions = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function goodsChange(e) {
      if (!e) {
        state.goodsForm = {}
        return
      }
      getDetail(e)
    }

    function getDetail(goodsId) {
      const obj = {
        goodsId
      }
      api.goodsInfoDetail(obj).then(res => {
        if (res.code == '200') {
          state.goodsForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function submitHandle() {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          if (state.loading) return
          state.loading = true
          const obj = {
            shopId: state.dialogForm.shopId,
            goodsId: state.dialogForm.goodsId,
            costPrice: state.dialogForm.costPrice,
            discountPrice: state.dialogForm.discountPrice,
          }
          if (state.dialogForm?.id) {
            obj.id = state.dialogForm.id
          }
          if (state.dialogForm.isCostPrice == 0) {
            obj.costPrice = -1
          }
          if (state.dialogForm.isDiscountPrice == 0) {
            obj.discountPrice = -1
          }
          const apiName = (state.isEdit ? 'shopLimitGoodsPriceModify' : 'shopLimitGoodsPriceAdd')
          api[apiName](obj).then(res => {
            state.loading = false
            if (res.code == '200') {
              successDeal(res.msg)
              context.emit('dialogClose')
              state.dialogFormVisible = false
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            state.loading = false
            console.log(err)
          })
        }
      })
    }

    function dialogClose() {
      state.isEdit = false
      state.goodsForm = {}
      state.dialogForm = {
        isCostPrice: 0,
        isDiscountPrice: 0,
      }
      dialogFormRef.value && dialogFormRef.value.resetFields()
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      dialogShow,
      dialogClose,
      goodsChange,
      accDiv,
      submitHandle,
    }
  }
}
</script>

<style lang="scss" scoped>
.price-box {
  display: flex;
  box-sizing: border-box;
  padding-bottom: 20px;
  > div {
    flex-grow: 1;
  }
}
</style>